<script>
	import {
		Canvas,
		Scene,
		PerspectiveCamera,
		Mesh,
		DirectionalLight,
		MeshStandardMaterial,
		PCFSoftShadowMap,
		BoxBufferGeometry,
		SphereBufferGeometry,
		PlaneBufferGeometry,
		MeshPhongMaterial,
		GridHelper,
		WebGLRenderer,
		AmbientLight,
		PointLight,
		OrbitControls,
		Vector3,
		Fog,
		MathUtils,
		DoubleSide,
		MeshBasicMaterial,
		TextureLoader
	} from 'svelthree';

	import { geometry1, sgmaterial } from './cu';

	import { rotateCube } from './animations';
</script>

<Canvas let:sti h={800} w={1000} interactive>
	<Scene {sti} let:scene id="scene1" props={{ background: '#000' }}>
		<PerspectiveCamera
			{scene}
			id="cam1"
			props={{ position: [500, 2000, 150], lookAt: [0, 0, 0] }}
		/>
		<DirectionalLight
			{scene}
			castShadow
			shadowMapSize={8 * 512}
			pos={[-300, 300, 60]}
			props={{ color: 0xffffff, intensity: 0.5 }}
		/>
		<DirectionalLight
			{scene}
			castShadow
			shadowMapSize={8 * 512}
			pos={[800, 350, 0]}
			props={{ color: 0xffffff, intensity: 1.5 }}
		/>
		<AmbientLight {scene} props={{ color: 0x444444, intensity: 1.25 }} />

		<!-- <Mesh {scene} geometry={grid} /> -->
		<!-- , wireframe: true -->
		<Mesh {scene} geometry={geometry1} material={sgmaterial} animation={rotateCube} aniauto />

		<OrbitControls {scene} enableDamping />
	</Scene>

	<WebGLRenderer
		{sti}
		sceneId="scene1"
		camId="cam1"
		config={{ antialias: true, alpha: true }}
		enableShadowMap
		shadowMapType={PCFSoftShadowMap}
	/>
</Canvas>
